<template>
  <div class="l-rblock print-dbtable">
    <div class="search-input-wraper">
      <el-input
        prefix-icon="el-icon-search"
        :placeholder="$t('搜索')"
        size="mini"
        v-model="searchWord"
        class="search-input"
      >
      </el-input>
    </div>
    <div class="l-rblock" style="overflow: auto;padding: 0 16px;">
      <el-tree
        :data="listShowData"
        default-expand-all
        :expand-on-click-node="false"
      >
        <div
          class="lr-tree-node"
          slot-scope="{ data }"
          style="position:relative;width:100%;"
        >
          <div :title="data.name" class="treeLabel">{{ $t(data.name) }}</div>
          <div v-if="data.isTable" class="deleteBtn" @click="handleDelete(data)"
            ><i class="el-icon-delete" style="color:#f56c6c;"></i
          ></div>
        </div>
      </el-tree>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchWord: ""
    };
  },
  computed: {
    listShowData() {
      if (this.searchWord) {
        return this.list.filter(
          (item) => item.name.indexOf(this.searchWord) > -1
        );
      }
      return this.list;
    },
  },
  created() {},
  methods: {
    handleDelete(node) {
      const index = this.list.find(t=>t.id == node.id);
      this.$emit('delete', index);
    }
  },
};
</script>

<style lang="scss">
.print-dbtable {
  padding-top: 56px;

  .search-input-wraper {
    position: absolute;
    width: 100%;
    padding: 16px;
    top: 0;
    left: 0;
  }

  .treeLabel {
    width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .deleteBtn {
    display: none;
    position: absolute;
    right: 4px;
    top: 0;
  }


  .lr-tree-node:hover .deleteBtn {
    display: block;
  }
}

</style>
